import React, { useState, useEffect } from 'react'
import { View } from '@tarojs/components'
import { NavBar, INavbarProps } from '@/components/NavBar'
import { Address, IAddressProps } from './Address'
import { BannerEle, IBannerProps } from './Banner'
import AdText from './AdText'
import { Search, ISearchProps } from './Search'
import { getSystemInfo } from '@tarojs/taro'
import { cartModel } from '@/model/CartModel'
import { Observer, useLocalStore } from 'mobx-react-lite'

export type IHeaderProps = {
} & IBannerProps & ISearchProps & IAddressProps & INavbarProps

export const Header: React.FC<IHeaderProps> = (props) => {

    const [top, setTop] = useState<number>(110)
    const carStore = useLocalStore(() => cartModel)

    useEffect(() => {

        getSystemInfo().then((sys) => {
            setTop(44 + sys.statusBarHeight + 30)
        })
    }, [])

    return (
        <Observer>
            {
                () =>
                    <View
                      className='xxm-header'
                      style={{ paddingTop: `${top}px` }}
                    >
                        <View className='xxm-header__bg'></View>
                        <View className='xxm-header__top'>
                            <NavBar title={carStore.shopDetail.name} safeArea />
                            <View className='xxm-header__content'>
                                <View className='xxm-header__left'>
                                    {/* <Address
                                        onLoad={props.onLoad}
                                    /> */}
                                </View>
                                <View className='xxm-header__right'>
                                   <Search placeholder='搜索' />
                                </View>
                            </View>
                        </View>
                        {
                            props.detail?.banner?.strcutData?.length > 0 && <BannerEle items={props.detail?.banner?.strcutData} />
                        }
                        {
                            props?.detail?.label?.length > 0 && <AdText items={props?.detail?.label} />
                        }
                    </View>
            }
        </Observer>

    )
}
